<template>
	<view>
		<!-- 顶部栏位 -->
		<u-navbar class="navbar" :border-bottom="false" title="库存维护" :title-size="36" :title-bold="true" :title-color="textColor" :customBack="back">
		</u-navbar>
		<!-- 搜索栏和选项卡固定 -->
		<view class="top-fixed" style="background-color: #FFFFFF;">
			<view class="u-flex">
				<view class="u-p-l-35 u-flex u-col-center" @tap="$mRouter.push({ route: '/pages/sale/classManger/index?type=choose&name='+searchClass.name+'&id='+searchClass.id })">
					<view class="u-m-r-10 u-line-1" style="max-width: 120rpx;">{{searchClass.name}}</view>
					<u-icon name="arrow-down-fill"></u-icon>
				</view>
				<view class="" style="flex:1">
					<!-- 搜索栏位 -->
					<ak-search-input type="text" :searchPlaceHolder="searchPlaceHolder" @focus="showMask(true)" @blur="showMask(false)" @search="search"></ak-search-input>
				</view>
			
			</view>
		
			<view style="height: 30rpx;"></view>
		</view>
		<!-- 占位盒子 -->
		<view style="height: 100rpx;"></view>
		<!-- list区域 -->
		<view class="box-padding u-p-t-10">
			<view class="item" v-for="(item, index) in list" :key="index" :style="{border: index+1 == list.length ? 'none': ''}" @click="toPage(item)">
				<view>
					<img :src="item.url" style="width: 100rpx;border-radius: 10rpx;vertical-align:middle; display: inline-block;" alt="" />
					<text style="margin-left: 20rpx;color: #333333;">{{ item.itemName }}</text>
				</view>
				<view class="u-flex">
					<text class="badge-color u-font-30 text-bold" >{{ item.inventoryBalance }}</text>
					<text class="u-font-22 u-m-r-12 u-m-l-8" >{{item.unit}}</text>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<u-mask :show="isShowMask" :duration="0" :z-index="10"></u-mask>
		<!--页面加载动画-->
		<akLoading isFullScreen :active="loading"></akLoading>
	</view>
</template>

<script>
	import AkSearchInput  from '@/components/ak-search-input';
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		components: { AkSearchInput },
		data() {
			return {
				loading: true,
				isShowMask: false,
				searchPlaceHolder: '葡萄酒',
				params: {
					name: '',
					pageIndex: 1,
					pageSize: 12
				},
				list: [],
				refreshIfNeeded:false,
				searchClass:{
					name:'店内分类',
					id:''
				}
			}
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'})
		},
		onShow() {
			uni.$off('sendClassData')//建议先销毁一次监听，再进行新的一次监听，否则会出现重复监听的现象
			let that = this;
			uni.$once('sendClassData',function(data){
				console.log(data);
					//这的data就是B页面传递过来的数据
					that.searchClass.name=data.name===''?'选择分类':data.name;
					that.searchClass.id=data.id===''?'':data.id;
			})
			var pages = getCurrentPages(); // 获取当前页面栈
			var currentPage = pages[pages.length - 1]; // 当前页面
			if (currentPage._data.refreshIfNeeded) {
				currentPage._data.refreshIfNeeded = false;
				//这里为要调用的函数，重新获取数据，记得加上this
			}
		},
		onLoad() {
			// 获取库存列表
			this.list = []
			this.params.pageIndex = 1;
			this.params.shopId = this.storeShop.id;
			this.getInventory()
		},
		onReady() {
			setTimeout(() => {
				this.loading = false
			}, 1000)
		},
		onReachBottom() {
			this.params.pageIndex++
			this.getInventory()
		},
		onBackPress(options) {
			uni.switchTab({
				url: '/pages/sale/index'
			})
			return true
		},
		methods: {
		
			async getInventory() {
				const res = await this.$http.get('api/Shop/GetItemInventoriesPage', { params: this.params })
				if (res.list.length == 0) return
				this.list = this.list.concat(res.list)
			},
			toPage(item) {
				this.$mRouter.push({ route: '/pages/sale/kucun/weihu', query: item })
			},
			search(e) {
				this.isShowMask = false
				uni.hideKeyboard()
				this.list = []
				this.params.name = e
				this.getInventory()
			},
			showMask(bool) {
				bool ? this.searchPlaceHolder = '' : this.searchPlaceHolder = '葡萄酒'
				this.isShowMask = bool
			},
			back() {
				this.$mRouter.switchTab({ route: '/pages/sale/index' })
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-bottom: 20rpx;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #F3F3F3;
	}
</style>
